<template>
  <div class="container">
    <div class="boxItem" v-for="(item, index) in data" :key="index">
      <div class="boxItem-count1">{{item.nameOne}}：{{item.valueOne}}</div>
      <div class="boxItem-count2">{{item.nameTwo}}：{{item.valueTwo}}</div>
      <Chart :id="'ZJ_BFB_TWO_B_BIG' + index" :cdata="item"/>
      <div class="boxItem-count3">{{item.bfbNameTwo}}</div>
    </div>
  </div>
</template>
<script>
  import Chart from './chart.vue'
export default {
  data () {
    return {
      data: [
        // {id: 'main11', name: '总用电量', value: '6000', name2: "蓄电站1", name3: '完成率', count: 0.8},
        // {id: 'main12', name: '总用电量', value: '6000', name2: "蓄电站1", name3: '完成率', count: 0.5},
        // {id: 'main13', name: '总用电量', value: '6000', name2: "蓄电站1", name3: '完成率', count: 0.6},
        // {id: 'main14', name: '总用电量', value: '6000', name2: "蓄电站1", name3: '完成率', count: 0.2},
        // {id: 'main15', name: '总用电量', value: '6000', name2: "蓄电站1", name3: '完成率', count: 0.4},
        // {id: 'main16', name: '总用电量', value: '6000', name2: "蓄电站1", name3: '完成率', count: 0.5},
      ],
      drawTiming: null
    };
  },
  components: {
    Chart,
  },
  props: {
    configCode: {
      type: String,
      default: ''
    },
    index: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    this.drawTimingFn()
  },
  beforeDestroy() {
    clearInterval(this.drawTiming);
    this.drawTiming = null
  },
  methods: {
    drawTimingFn () {
      this.queryData();
      this.drawTiming = setInterval(() => {
        this.queryData();
      }, 17000);
    },
    queryData() {
      this.$http.get("/visShow/queryData", {
        params: {
          configCode: this.configCode,
          index: this.index
        }
      }).then(res => {
        const {data} = res
        console.log(data, '百分比图二大')
        if (data.status == 200) {
          this.data = data.object.values
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    padding: 20px 10px 10px 10px;

    .boxItem {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 150px;
      height: 180px;

      .boxItem-count1 {
        height: 21px;
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 21px;
      }

      .boxItem-count2 {
        height: 21px;
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 21px;
      }

      .boxItem-count3 {
        height: 18px;
        font-size: 12px;
        font-family: Source Han Sans CN, Source Han Sans CN-Medium;
        font-weight: 500;
        text-align: left;
        color: #ffffff;
        line-height: 14px;
      }
    }
  }
</style>
